<script lang="ts" setup>

import { ref } from 'vue'

import type { UploadProps, UploadUserFile } from 'element-plus'
import {Plus} from "@element-plus/icons-vue";
const url = 'http://localhost:8080/api/auth/upload'
const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'food2.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
])

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file)
}
function uploadFileSuccess(response, file, fileList) {
  console.log(response.code);
}

</script>

<template>
  <div class="ordering">
    <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        :action="url"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :on-success="uploadFileSuccess"
        list-type="picture-card"
    >
<!--      <el-button type="primary">点击上传图片</el-button>-->
      <el-icon><Plus /></el-icon>
      <template #tip>
        <div class="el-upload__tip">
          jpg/png files with a size less than 500kb
        </div>
      </template>
    </el-upload>
  </div>
  <div style="margin-left: 600px; margin-top: 350px">
    <el-image style="width: 100px; height: 100px" src="http://localhost:8080/api/auth/download/1937507">

    </el-image>


  </div>
</template>

<style scoped>

</style>